Design System — Shreyansh Gaurav

01 — Colors

Color tokens

11 semantic color tokens. Every color on the site belongs to one of these groups — surface, text, brand, border, or semantic state. No hardcoded hex values in page CSS.

11 tokens

Semantic names, clear hierarchy

Each token has a single purpose. Names describe intent ("text-secondary"), not position ("muted2"). Backgrounds collapsed to 3 levels that actually differ visually.

Surface — 3 levels

--surface-base#0F1412Page background

--surface-raised#1A201DSections, cards

--surface-overlay#252B28Modals, nav blur

Text — 3 tiers of emphasis

--text-primary#FFFFFFHeadings, body

--text-secondarywhite/72%Descriptions

--text-tertiarywhite/48%Metadata, labels

Brand — accent only

--accent#FFC321Brand, CTAs

--accent-hover#FFD658Hover states

Borders — 2 levels

--border-subtlewhite/8%Divider lines

--border-defaultwhite/14%Inputs, cards

Semantic states

--state-error#FF6B6B

--state-success#34D399

Rationale: Every token has a single purpose. The three surface levels have noticeable contrast so raised cards actually look raised. Error and success are tokenized so they never get hardcoded.

02 — Typography

Type scale

Two font families (Outfit for headings, Inter for body) on a 1.25× modular scale. Every heading and body size is one of the 9 tokens below. Scales automatically across desktop, tablet, and mobile.

2 fonts, 9 sizes

Two fonts, modular scale (1.25 ratio)

Outfit handles all headings. Inter handles all body. 9 sizes cover every use case, each built on the perfect-fourth modular scale (1.25×).

Display Display Outfit 500 / 72px

H1 Page Title Outfit 500 / 56px

H2 Section Outfit 500 / 44px

H3 Subsection Outfit 500 / 32px

H4 Card title Outfit 500 / 22px

Body L Large body for hero & long-form Inter 400 / 18px

Body Default paragraph text Inter 400 / 16px

Small Metadata, captions Inter 500 / 14px

Eyebrow Eyebrow Label Outfit 500 / 12px

Rationale: Body defaults to weight 400 (regular) for better readability on long text. Medium (500) is reserved for UI, headings, and small/caption text where extra weight aids legibility. Removing Heebo saves ~35KB of font weight and simplifies visual identity.

Responsive scale per breakpoint

Token	Desktop	Tablet	Mobile
Display	72px	56px	40px
H1	56px	44px	32px
H2	44px	36px	28px
H3	32px	28px	24px
H4	22px	20px	18px
Body L	18px	17px	16px
Body	16px	16px	15px
Small	14px	14px	13px
Eyebrow	12px	12px	11px

03 — Border Radius

Roundness scale

Sharp corners everywhere. Rounded rectangles dilute the editorial tone, so every button, card, input, chip, and panel uses 0 radius. The only exception: inherently circular shapes (avatars, swatches, dot indicators).

2 values only

Sharp corners, period.

No rounded rectangles anywhere — buttons, cards, inputs, chips, modals all use 0. The only radius allowed is --radius-full (999px) for inherently circular shapes (avatars, color swatches, dot indicators).

none

0

full

999px

Usage mapping

Token	Value	Where
--radius-none	0	Everything — buttons, cards, inputs, images, modals, filter chips, badges, section panels
--radius-full	999px	Avatars, color swatches, dot indicators (only inherently round shapes)

Rationale: Editorial identity is built on confident geometry. Rounded rectangles dilute that tone. By committing to 0 for every rectangle, the site feels like it was designed on paper with a straight-edge — every corner is intentional. Circles are reserved for things that are genuinely circular in the real world.

04 — Spacing

Spacing & padding scale

Every spacing value should belong to a predictable scale. The 8-point grid is the industry standard and works here because it aligns cleanly with the type scale.

8-point scale

Every value is a multiple of 4

Named scale from xs to 5xl. Use tokens, not hardcoded pixels. Scales automatically across breakpoints.

--space-xs

4px

--space-sm

8px

--space-md

16px

--space-lg

24px

--space-xl

32px

--space-2xl

48px

--space-3xl

64px

--space-4xl

96px

--space-5xl

128px

Section padding per breakpoint

Type	Desktop	Tablet	Mobile
Horizontal (--pad)	96px	48px	24px
Section vertical	96px	64px	48px
Compact section	64px	48px	32px
Card padding	24px	20px	16px
Button padding	12px 24px	12px 20px	10px 16px

Rationale: Every size is divisible by 4, so components line up naturally on a grid. Scale ratio of ~1.5x between tokens means each step feels meaningful. Developer/designer picks from a known list instead of inventing values.

05 — Buttons

Button system

One CTA pattern across the entire site: uppercase text with a trailing arrow. Hover triggers the per-letter flip (white → accent yellow) with staggered delay. No backgrounds, no borders. Filter chips are the only exception (needed for group-toggle UX).

text-only, one system

No boxes. Letters + motion.

One CTA pattern across the site: uppercase text with a trailing arrow. Hover triggers the per-letter flip (white → accent yellow) with staggered delay. No backgrounds, no borders, no pill-vs-solid debates.

Default CTA — hover me

Used for every primary action across the site: Send Message, View All, View Case Study, Next Project, etc. Text is always UPPERCASE. Arrow on the right slides 4px on hover. Each letter flips to accent yellow on hover with 20ms per-character stagger.

Disabled state

Faded white, no hover, arrow dimmed. Pointer-events disabled so hover animation doesn't fire.

Filter chip

Rectangular outlined chip for togglable filter groups. Sharp corners match the rest of the system. Active state: accent border and accent text, no fill.

CTA specs across breakpoints

Property	Desktop	Tablet	Mobile
Font size	15px	15px	14px
Letter spacing	.5px	.5px	.5px
Arrow spacing (rest)	10px	10px	8px
Arrow spacing (hover)	14px	14px	12px
Letter flip duration	250ms	250ms	250ms
Letter stagger	20ms/char	20ms/char	20ms/char

Rationale: A portfolio reads better without box-heavy UI. Text-only CTAs let the writing carry the hierarchy; motion carries the affordance. The per-letter flip is distinctive to this site — it's the signature interaction. Only filters (which need to show active state in a group) use a box.

06 — Forms

Input fields & form elements

Inputs should feel like part of the same family as buttons — same radius, same padding math, same focus ring.

sharp, tokenized

Zero radius. Clean focus state.

Inputs match the rest of the system: sharp corners, subtle border. Focus turns the border accent yellow. Error state uses the --state-error token with a faint background tint.

Name

Message

Error state (token)

Enter a valid email address

Rationale: Inputs feel like part of the editorial page, not a separate UI layer. Focus ring is always accent color — predictable. Error state uses --state-error + 4% background tint for soft context.

07 — Icon Buttons

Icon buttons & navigation arrows

Icon buttons are used for navigation (carousel arrows, lightbox prev/next) and utility actions (close, menu). They need their own consistent style because text-only CTAs don't work when there's no text.

one icon button

Sharp square. 2px border. Accent on hover.

Every icon button shares the exact same shell. Two sizes (default 56×56, small 44×44). Same border, same hover state, same active press.

Default — 56×56 (carousel, lightbox arrows)

Small — 44×44 (mobile arrows, compact UI)

Shared specs

Property	Default	Small
Size	56×56	44×44
Border	2px solid #323936	2px solid #323936
Background	transparent	transparent
Icon size	18×18	14×14
Stroke width	2px	2px
Hover	border-color → --accent	border-color → --accent
Active	border-width 1px + scale(.96)	border-width 1px + scale(.96)
Focus-visible	outline 2px --accent · offset 2px	outline 2px --accent · offset 2px

Used for

Context	Size	Where
Testimonial carousel	56px	Homepage testimonials prev/next
Lightbox arrows	56px (44px mobile)	Case study image zoom prev/next
Lightbox close	48px	Case study image zoom top-right
Burger menu	44px	Mobile navbar

Rationale: One visual language for every non-text interactive control. Users learn "square with border = clickable icon." The hover state (border turns accent) is the same affordance signal used everywhere else on the site.

08 — Cards

Card system

One card pattern for every context — blog posts, case studies, project grid, metrics, testimonials, value props. Sharp corners, subtle border, consistent hover behavior (lift + thumbnail zoom + title shifts to accent).

one card, sharp

One card pattern. Zero radius.

Every card on the site shares the same shell: sharp corners, subtle border, thumbnail on top, content below. Used by blog posts, case studies, value props, testimonials, metrics — all the same.

📰

Project / Blog

Image + title + description. Hover lifts 4px, thumbnail zooms 1.04x, title shifts to accent.

📊

Metric / Value

Same shell, text-only content. Used for stats, testimonials, value propositions.

Shared behavior

Attribute	Value
Border radius	0
Background	--surface-raised
Border	1px solid --border-subtle
Padding (desktop)	24px
Padding (tablet)	20px
Padding (mobile)	16px
Hover lift	translateY(-4px) · 350ms · --ease-out
Image zoom	scale(1.04) · 500ms · --ease-out
Title on hover	color → --accent · 250ms

Rationale: One card shape across the whole site. Users instantly recognize "this is a card" regardless of what's inside it. Sharp corners keep the editorial, confident tone.

09 — Breakpoints

Responsive behavior

Three breakpoints covering every device — Mobile (< 640px), Tablet (640–1024px), Desktop (> 1024px). Every token scales predictably at these three tiers.

3 breakpoints

Mobile · Tablet · Desktop

Three clear tiers aligned to actual devices.

📱

Mobile

< 640px

Single column, stacked nav hidden behind hamburger, 24px side padding, tightest type scale.

📲

Tablet

640 – 1024px

2-column grids where possible, nav still hamburger, 48px side padding, medium type scale.

💻

Desktop

> 1024px

Full multi-column layouts, horizontal nav visible, 96px side padding, full type scale.

Example — Hero heading scale

Mobile

< 640px

I Design Solutions.

Hello there, I am Shreyansh Gaurav.

Tablet

640 – 1024px

I Design Solutions.

Hello there, I am Shreyansh Gaurav.

Desktop

> 1024px

I Design Solutions.

Hello there, I am Shreyansh Gaurav.

Rationale: 3 breakpoints cover 99% of devices. Mobile-first media queries (min-width) make intent clear. Less CSS overall, predictable behavior on every device.

10 — Motion

Animation & easing

Motion is part of the brand. 5 duration tokens + 4 easing tokens power every animation on the site — from hover states to scroll-triggered reveals.

5 durations · 4 easings

Tokenized motion scale

Every animation picks from a short list. One token per intent (hover, reveal, long-form, marquee).

Duration tokens

Token	Value	Use
--duration-instant	100ms	Button press, focus ring
--duration-fast	200ms	Hover states (color, border, shadow)
--duration-base	350ms	Card lift, image zoom, nav slide
--duration-slow	600ms	Heading reveals (gravity drop)
--duration-longform	1800ms	Body per-line wave reveal

Easing tokens

--ease-out

cubic-bezier(.22, 1, .36, 1)

Default. Reveals, hovers, anything entering view.

--ease-smooth

cubic-bezier(.19, 1, .22, 1)

Long-form body reveals. Gentlest exit curve.

--ease-spring

cubic-bezier(.34, 1.56, .64, 1)

Playful overshoot. Use sparingly (1–2 moments per page).

--ease-linear

linear

Marquees, spinners, infinite loops only.

Rationale: 5 durations, 4 easings. Every new animation must pick from this list — no custom values. Reduces visual noise and keeps the site feeling handcrafted rather than auto-generated.

Named motion patterns

The five animations we use sitewide, documented and demoed.

Pattern 01 — Heading Reveal

Gravity Drop · per-letter

Applied to every yellow primary heading across the site (homepage sections, case study titles, blog post titles, contact, about). Letters drop in from above with a subtle bounce.

Live demo

Project Overview

Property	Value
Duration	600ms (--duration-slow)
Easing	cubic-bezier(.22, 1, .36, 1) + overshoot keyframes
Stagger	50ms per character
Trigger	IntersectionObserver (threshold 0.15) — runs once
Reduced-motion	Respected — animation skipped

Pattern 02 — Body Reveal

Wave Rise · per-line

Main body paragraphs across the site (hero descriptions, section intros, case study overviews, contact subtitle). Each line emerges from a clipped mask, offset from below.

Live demo

I design digital products that make complex things feel simple. My work sits at the intersection of research, craft, and systems thinking — built on empathy for real users.

Property	Value
Duration	1800ms (--duration-longform)
Easing	--ease-smooth (cubic-bezier(.19, 1, .22, 1))
Stagger	0ms — all lines move together
Opacity	Never changes — lines stay 100% visible behind mask
Trigger	IntersectionObserver (threshold 0.15)

Pattern 03 — CTA Hover (per-letter)

Per-letter flip · the signature interaction

Applied to every link, button, and CTA across the site — navbar items, "View All", "View Case Study", "Send Message", footer email, filter chips. Per-letter, not per-word — each character is wrapped in its own mask and flips individually from white to accent yellow, with a staggered delay that creates the wave feel.

Hover me

View Projects →

Property	Value
Unit of animation	1 character (not word)
At-rest transition	1300ms · --ease-out
On-hover transition	250ms · --ease-out
Per-letter stagger	20ms, capped at 400ms total
Color	--text-primary → --accent
Reveal mechanic	Y-axis flip — original char slides up, accent clone slides up from below
Applied via	split-hover.js + base.css .split-hover rules

Pattern 04 — Card Hover

Lift + Zoom + Title Shift

Blog cards, project cards, Next Project block. Card lifts 4px, thumbnail zooms 1.04x, title turns accent.

🎨

Hover me

Element	Value
Card lift	translateY(-4px) · 350ms · --ease-out
Shadow	12px 40px · 350ms
Thumbnail zoom	scale(1.04) · 500ms · --ease-out
Title color	200ms · ease

Pattern 05 — Infinite Scroll

Marquee · logos, testimonials background

Horizontal scrolling strips (client logos, decorative background text). Linear loop, pauses on hover.

Property	Value
Duration	28s (logos) / 32s (bgline)
Easing	--ease-linear (the only linear use)
Direction	Alternating (logos-top right, logos-bottom left)
Pause on hover	animation-play-state: paused

Motion rules

Use --duration-fast for hover (color, border, shadow).
Use --duration-base for movement (transform, slide).
Use --duration-slow for entry reveals (heading gravity drop).
Use --duration-longform for per-line body wave reveals only.
Respect prefers-reduced-motion — skip all non-essential animation.
Trigger reveals via IntersectionObserver with threshold 0.15, and unobserve after firing once.
Always pick from the 5 duration + 4 easing tokens. Don't invent values or write inline cubic-beziers.

One visual languageacross every page.

Color tokens

Semantic names, clear hierarchy

Type scale

Two fonts, modular scale (1.25 ratio)

Roundness scale

Sharp corners, period.

Spacing & padding scale

Every value is a multiple of 4

Button system

No boxes. Letters + motion.

Input fields & form elements

Zero radius. Clean focus state.

Icon buttons & navigation arrows

Sharp square. 2px border. Accent on hover.

Card system

One card pattern. Zero radius.

Responsive behavior

Mobile · Tablet · Desktop

Animation & easing

Tokenized motion scale

Named motion patterns

Gravity Drop · per-letter

Project Overview

Wave Rise · per-line

Per-letter flip · the signature interaction

Lift + Zoom + Title Shift

Marquee · logos, testimonials background

Motion rules

One visual language
across every page.